<template>
  <div class="order-echarts-main">
    <div id="orderEcharts" class="order-echarts"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {  
  name: '',
  data () {
   return {}
  },
  props: {
    orderData: {
      type: Array,
      required: true,
    }
  },
  mounted() {
    this.initOrderEcharts()
  },
   methods:{
     initOrderEcharts() {
      var dateList = []
      var orderList = []
      var returnList = []
      this.orderData.forEach(ele => {
        dateList.push(ele.date)
        orderList.push(ele.orderNum)
        returnList.push(ele.returnNum)
      })
      //初始化echarts对象
      var demoEchart = echarts.init(document.getElementById('orderEcharts'))
      //声明options对象
      var option = {
        title: {
          text: '订单退单柱状图',
          //设置字体为斜体
          textStyle: {
            color: 'red',
          }
        },
        tooltip: {
          backgroundColor: 'rgba(0,0,0,.5)',
          textStyle: {
            color:'#fff'
          }
        },
        xAxis: {
            data: dateList,
            axisLabel: {
              rotate: 30
            }
          },
          yAxis: {
            axisLabel: {
              lineStyle: {
                type: 'solid',
                color: 'red',//y轴左边线的颜色
                width:'1' //坐标线的宽度
              }
            }
          },
          series: [
            {
              name: '订单',
              type: 'bar',
              data: orderList
            },
            {
              name: '退单',
              type: 'bar',
              data: returnList,
              itemStyle: {
                normal: {
                  //渐变柱状图
                  color: new echarts.graphic
                }
              }
            },
          ]
      }
      //设置图标
      demoEchart.setOption(option)
     }, 
   }
}
</script>
<style lang="scss"scoped>
.order-echarts-main {
  width:100%;
  height: 100%;
  .order-echarts{
    width:100%;
    height: 100%;
  }
}
</style>